<script setup lang="ts">
const props =defineProps<{
	icon:string,
	text:string,
	source:string,
}>()


const emit = defineEmits<{
	(e: 'click', source: string): void
}>();

function dblclick(){
	emit('click', props.source);
}
</script>

<template>  		
	<div class="desktop-item" @dblclick="dblclick">
		<div class="item">
			<div class="icon"></div>
			<div class="text">{{ text }}</div>
		</div>
	</div>
</template>

<style scoped>

		.desktop-item{
			width: 100%;
			height: 100%;
			display: flex;
			
		}
		.desktop-item .item{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0.8em;
		}
		.desktop-item .item .icon{
			width: 5em;
			height: 5em;
			background-color: #023dbd;
			border-radius: 10%;
		}
		.desktop-item .item .text{
			font-weight: bold;
			font-size: 1.2em;
			color: #023dbd;
		}
</style>